<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MySql Charting</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
    <style>
        .input {
            width: 100%
        }

        .input-box {
            width: 100%;
            height: 250px;
            resize: vertical;
        }

        .button {
            width: 110px;
            height: 60px;
            border-radius: 6px;
            border: none;
            background-color: #409EFF;
            font-size: 18px;
            color: #fff;
            outline: none;
            cursor: pointer;
        }

        .button:hover {
            background-color: #66b1ff
        }

    </style>
</head>
<body>


<div id="app">
    Database Config:
    <br>
    <input type="text" class="input" v-model="config">
    <br>
    <br>
    SQL:
    <br>
    <textarea v-model="sql" class="input-box"></textarea>
    <br>
    <button @click="submit()" class="button">Submit</button>
    <ve-line :data="chartData"></ve-line>
</div>

<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="//cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<script>
    vue = new Vue({
        el: '#app',
        data: function () {
            return {
                config: '{"host":"host", "user":"user", "password":"pwd", "db":"db name"}',
                sql: '',
                chartData: {
                    columns: ['日期', '销售额'],
                    rows: [
                        {'日期': '1月1日', '销售额': 123},
                        {'日期': '1月2日', '销售额': 1223},
                        {'日期': '1月3日', '销售额': 2123},
                        {'日期': '1月4日', '销售额': 4123},
                        {'日期': '1月5日', '销售额': 3123},
                        {'日期': '1月6日', '销售额': 7123}
                    ]
                }
            }
        },
        methods: {
            submit: function () {
                var self = this
                var request = new Request('/query', {
                    method: 'POST',
                    body: JSON.stringify({sql: self.sql, config: self.config})
                });
                fetch(request).then(function (res) {
                    res.json().then(function (result) {
                        if (result.success) {
                            self.chartData = result.data
                        } else {
                            console.error(result.message)
                        }
                    })
                })
            }
        }
    })
</script>
</body>
</html>